<link href="/static/assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONT AWESOME STYLE  -->
<link href="/static/assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE  -->
<link href="/static/assets/css/nav.css" rel="stylesheet" />
<link href="/static/assets/css/style.css" rel="stylesheet" />
<!-- GOOGLE FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<div style="padding:20px 10px" >
    <div class="panel panel-info panel-zs">
        <div class="panel-heading">Find {:count($data)} result for you</div>
        <div class="panel-body">
            <table class="table table-hover table-bordered" >
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Country</th>
                        <th>City</th>
                        <th>Certificate Code</th>
                    </tr>
                </thead>

                <tbody>
                    {if condition="$data"}
                    {volist name="data" id="v"}
                    <tr>
                        <td><a href="{:url('find/info',['id'=>$v.id])}">{$v.first_name} {$v.surnames}</a></td>
                        <td>{$v.country}</td>
                        <td>{$v.city}</td>
                        <td>{$v.certificate_code}</td>
                    </tr>
                    {/volist}
                    {else/}
                    <tr>
                        <td colspan="5" class="text-center">Sorry, but no records matching your criteria were found.</td>
                    </tr>
                    {/if}
                </tbody>
            </table>
        </div>
    </div>
</div>